<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>绩效查看</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/city-select.css">
    <link type="text/css" rel="stylesheet" href="js/plugins/layer/laydate/skins/default/laydate.css" id="LayDateSkin">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="ibox float-e-margins">
                <div class="ibox-title"><h5>搜索</h5></div>
                <div class="ibox-content border-left-right" style="height: 80px">
                        <div class="col-md-11">
                            <div class="city-select" id="single-select-1" style="width: 100%">
                                <div class="city-info" style="width: 100%">
                                    <div class="city-name">
                                        <span>北京市</span>
                                        <span>北京市</span>
                                        <span>北京市</span>
                                        <span>北京市</span>
                                    </div>
                                    <div class="city-input">
                                        <input type="text" class="input-search" value="" placeholder="请选择城市" />
                                    </div>
                                </div>
                                <ul class="city-list hide">
                                    <li class="caller active"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                    <li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
                                </ul>
                                <div class="city-pavilion hide" style="width:100%;">
                                    <div class="city-tabs">
                                        <a href="javascript:;" class="active">热门城市</a>
                                        <a href="javascript:;">AB</a>
                                        <a href="javascript:;">CD</a>
                                        <a href="javascript:;">EFG</a>
                                        <a href="javascript:;">H</a>
                                        <a href="javascript:;">J</a>
                                        <a href="javascript:;">KL</a>
                                        <a href="javascript:;" class="forbid">MNP</a>
                                        <a href="javascript:;">QR</a>
                                        <a href="javascript:;">S</a>
                                        <a href="javascript:;">T</a>
                                        <a href="javascript:;">W</a>
                                        <a href="javascript:;">X</a>
                                        <a href="javascript:;">Y</a>
                                        <a href="javascript:;">Z</a>
                                    </div>
                                    <div class="city-cont">
                                        <dl class="city-HOT">
                                            <dd>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                                <a href="javascript:;">北京市</a>
                                            </dd>
                                        </dl>
                                        <p>*可以直接搜索查找城市（支持名称、拼音模糊搜索）<a href="javascript:;">清空</a><span>5</span></p>
                                        <div class="city-tips">最多只能选择<span>5</span>项</div>
                                    </div>
                                </div>
                            </div><!-- end .city-select -->
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row animated fadeInRight">
        <div class="col-sm-4 col-sm-offset-1">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>个人资料</h5>
                </div>
                <div>
                    <div class="ibox-content no-padding border-left-right">
                        <img alt="image" class="img-responsive" src="img/profile_big.jpg">
                    </div>
                    <div class="ibox-content profile-content">
                        <h5 class="label">个人相关信息</h5>
                        <div class="row m-t-lg">
                            <div class="col-sm-5">
                                <h5><strong>姓名：</strong></h5>
                            </div>
                            <div class="col-sm-5 col-sm-offset-1">
                                <h5><strong id="username">明活</strong></h5>
                            </div>
                        </div>
                        <div class="row m-t-lg">
                            <div class="col-sm-5">
                                <h5><strong>负责地区：</strong></h5>
                            </div>
                            <div class="col-sm-5 col-sm-offset-1">
                                <h5><strong>xxx区</strong></h5>
                            </div>
                        </div>
                        <div class="row m-t-lg">
                            <div class="col-sm-5">
                                <h5><strong>字段1：</strong></h5>
                            </div>
                            <div class="col-sm-5 col-sm-offset-1">
                                <h5><strong>xxx区</strong></h5>
                            </div>
                        </div>
                        <div class="row m-t-lg">
                            <div class="col-sm-5">
                                <h5><strong>字段2：</strong></h5>
                            </div>
                            <div class="col-sm-5 col-sm-offset-1">
                                <h5><strong>xxx区</strong></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 ">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>最新统计</h5>


                </div>
                <div class="ibox-content">
                    <div class="row" style="margin-bottom: 15px">
                        <h5 class="col-sm-3">选择日期: </h5>
                        <div class="col-sm-7">
                            <input placeholder="YYYY-MM-DD" name="edittime"
                                   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"
                                   class="laydate-icon layer-date">
                        </div>
                    </div>

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>工作内容</th>
                            <th>在线时长（h）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>文字</td>
                            <td>2.2</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>图片</td>
                            <td>3.3</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>多媒体</td>
                            <td>4.4</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>

        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>



<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>


<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>

<!-- Peity -->
<script src="js/demo/peity-demo.js"></script>
<script type="text/javascript" src="js/newcitydata.js"></script>
<script type="text/javascript" src="js/citySelect-1.0.0.js"></script>
<script type="text/javascript" src="js/pinyin.js"></script>
<script src="js/plugins/layer/laydate/laydate.js"></script>

<script type="text/javascript">
    var cityData=[{"name":"明活"},{"name":"京楚"},{"name":"意昌"},{"name":"太展"},{"name":"原凡"},{"name":"彬华"},{"name":"济鳞"},{"name":"鼐望"},{"name":"鼐奉"},{"name":"鲁欲"},{"name":"鲁大"},{"name":"鲁之"},{"name":"骞通"},{"name":"骞西"},{"name":"骞至"},{"name":"骞复"},{"name":"首春"},{"name":"飞性"},{"name":"顺魂"},{"name":"顺引"},{"name":"顺大"},{"name":"镇芳"},{"name":"钟俊"},{"name":"金称"},{"name":"金牙"},{"name":"野塘"},{"name":"邦栋"}];
    $(function() {
        // 单选
        tacleInputData(cityData);
        var singleSelect1 = $('#single-select-1').citySelect({
            dataJson: cityData,
            multiSelect: false,
            shorthand: true,
            search: true,
            convert: false,
            onInit: function () {
                console.log(this)
            },
            onTabsAfter: function (target) {
                console.log(target)
            },
            onCallerAfter: function (target, values) {
                $("#username").text(values.name);
            }
        });
        // 单选设置城市
        singleSelect1.setCityVal('明活');
    });
    function tacleInputData(namedata) {
        $.each(namedata, function (key, value) {
            value.parentId=key.toString();
            value.id=key.toString();
            value.shortName=value.name;
            value.cityCode=key.toString();
            value.pinyin=codefans_net_CC2PY(value.name);
            value.letter=value.pinyin.substring(0,1);
        });
    }
</script>


</body>

</html>
